<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in product.imgList" :key="index">
					<view class="image-wrapper">
						<image :src="item + '?x-oss-process=style/600px'" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<text class="title">{{product.title}}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{isVip ? (selectedSku.vipPrice ? selectedSku.vipPrice : product.vipPrice) / 100.0 : (selectedSku.price ? selectedSku.price : product.price) / 100.0 }}</text>
				<text v-if="(isVip ? (selectedSku.vipPrice ? selectedSku.vipPrice : product.vipPrice) : (selectedSku.price ? selectedSku.price : product.price)) < (selectedSku.price ? selectedSku.originalPrice : product.originalPrice)"
				 class="m-price">¥{{(selectedSku.price ? selectedSku.originalPrice : product.originalPrice) / 100}}</text>
				<text v-if="product.priceTag" class="coupon-tip">{{ product.priceTag }}</text>
				<text v-else-if="(isVip ? (selectedSku.vipPrice ? selectedSku.vipPrice : product.vipPrice) : (selectedSku.price ? selectedSku.price : product.price)) < (selectedSku.price ? selectedSku.originalPrice : product.originalPrice)"
				 class="coupon-tip">{{parseInt((isVip? (selectedSku.vipPrice ? selectedSku.vipPrice : product.vipPrice): (selectedSku.price ? selectedSku.price : product.price)) / (selectedSku.originalPrice ? selectedSku.originalPrice : product.originalPrice) * 100) / 10}}折</text>
			</view>
			<view class="bot-row">
				<text>销量: {{ product.sales }}</text>
				<text>库存: {{ product.stock }}</text>
			</view>
		</view>

		<!-- 团购分享 -->
		<button v-if="activityType === 1" class="share-section" open-type="share">
			<view class="share-icon">
				<text class="yticon icon-xingxing"></text>
				团
			</view>
			<text class="tit">{{product.activity.minNum}}人成团，已有{{product.activity.buyerNum}}人参团</text>
			<text class="yticon icon-bangzhu1"></text>
			<view class="share-btn">
				告诉TA
				<text class="yticon icon-you"></text>
			</view>
		</button>

		<view class="c-list">
			<view class="c-row b-b" @click="toggleSpec">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text">
						{{selectedSku.title?selectedSku.title:'请选择'}}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view v-if="couponList.length > 0" @click="toggleMask('show')" class="c-row b-b">
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">配送费用</text>
				<view v-if="product.freightTemplate" class="con-list">
					<text>单笔购买满¥{{product.freightTemplate.defaultFreePrice / 100.0}}元免邮费</text>
					<text v-if="product.freightTemplate.defaultContinueMoney > 0">每增加{{product.freightTemplate.defaultFirstNum}}件，增加运费¥{{product.freightTemplate.freightTemplateDO.defaultContinueMoney / 100.0}}元</text>
					<text v-if="product.freightTemplate.carriageDOList.length > 0">TODO 特殊情况说明页面</text>
				</view>
			</view>
			<view v-for="(item, index) in product.attributeList" :key="index" class="c-row b-b">
				<text class="tit">{{item.attribute}}</text>
				<view class="bz-list con">
					<text>{{item.value}}</text>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view v-if="product.appraisePage && product.appraisePage.items.length > 0" class="eva-section">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{product.appraisePage.count}})</text>
				<text @click="navAppraisePage" class="tip">全部评论</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="product.appraisePage.items[0].userAvatarUrl ? product.appraisePage.items[0].userAvatarUrl : '/static/missing-face.png'"
				 mode="aspectFill"></image>
				<view class="right">
					<text class="name">{{product.appraisePage.items[0].userNickName?product.appraisePage.items[0].userNickName:('用户' + product.appraisePage.items[0].userId)}}</text>
					<text class="con">{{product.appraisePage.items[0].content}}</text>
					<view class="bot">
						<text class="attr">购买类型：{{product.appraisePage.items[0].skuTitle}}</text>
						<text class="time">{{product.appraisePage.items[0].gmtCreate}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<u-parse className="rich-img" :content="product.detail"></u-parse>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>

			<view class="p-b-btn" :class="{active: product.favorite}" @click="likeIt">
				<text class="yticon icon-shoucang"></text>
				<text>收藏</text>
			</view>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">{{ product.groupShop ? '立即参团' : '立即购买'}}</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="addCart">加入购物车</button>
			</view>
		</view>

		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<view @click="obtainCoupon(index)" class="coupon-item" v-for="(item,index) in couponList" :key="index">
					<view class="con">
						<view class="left">
							<text class="title">{{item.title}}</text>
							<text v-if="item.gmtEnd" class="time">在{{item.gmtEnd}}前有效。 可领{{item.limit}}张，已领{{item.nowCount}}张</text>
							<text v-if="!item.gmtEnd" class="time">在领取后{{item.days}}天内有效。可领{{item.limit}}张，已领{{item.nowCount}}张</text>
						</view>
						<view class="right">
							<text class="price">{{item.discount / 100.0}}</text>
							<text>满{{item.min / 100.0}}可用</text>
						</view>
						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips">{{item.categoryTitle?'限' + item.categoryTitle + '可用': '全品类可用'}}</text>
				</view>
			</view>
		</view>


		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="closeSpec">
			<!-- 遮罩层 -->
			<view class="mask" />
			<view class="layer attr-content">
				<view class="a-t">
					<image v-if="product.img" :src="(selectedSku.img?selectedSku.img:product.img) + '?x-oss-process=style/200px'" />
					<view class="right">
						<text class="price">
							¥{{ isVip ? (selectedSku.vipPrice / 100.0) : selectedSku.price / 100.0 }} <text v-if="selectedSku && selectedSku.priceTag" class="coupon-tip">{{ selectedSku.priceTag }}</text>
						</text>
						<text class="stock">
							库存：{{ selectedSku.stock }}件
						</text>
						<view class="selected">
							已选：
							<text>
								{{ selectedSku.title }}
							</text>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" style="max-height: 70vh;" @click.stop="stopPrevent">
					<view v-for="(specItem, specIndex) in product.specificationList" :key="specIndex" class="attr-list">
						<text>{{ specItem.title }}</text>
						<view class="item-list">
							<text v-for="(valueItem, valueIndex) in specItem.values" :key="valueIndex" class="tit" :class="{selected: valueIndex === specItem.selectedIndex}"
							 @click="selectSpec(specIndex, valueIndex)">
								{{ valueItem }}
							</text>
						</view>
					</view>
					<text>数量</text>
					<view style="height: 70upx; margin-bottom: 100upx; margin-top: 15upx; position: relative;">
						<uni-number-box class="step" :min="1" :value="buyNum" :is-min="buyNum===1" :index="index" @eventChange="numberChange" />
					</view>
					<button class="btn" @click="toggleSpec">
						完成
					</button>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue';
	import uParse from '@/components/u-parse/u-parse.vue';
	export default {
		components: {
			uParse,
			uniNumberBox
		},
		data() {
			return {
				spuId: undefined,
				product: {
					freightTemplate: undefined,
					skuList: [],
					categoryList: [],
					appraisePage: undefined
				},
				isVip: false,
				specClass: 'none',
				specSelected: [],
				buyNum: 1,
				selectedSku: {},
				selectedSkuIndex: -1,
				toggleCallback: undefined,
				maskState: 0, //优惠券面板显示状态
				couponList: [],
				submiting: false,
				// 有效activity, 若activity未开始或已经结束，此三个值将为 undefined
				activityType: undefined,
				activityId: undefined,
				activity: undefined

			};
		},
		onShow() {
			this.isVip = this.$api.isVip()
		},
		onLoad(options) {
			const that = this
			that.spuId = options.id
			that.loadData()
		},
		onShareAppMessage() {
			return {
				title: (this.activityType === 1 ? '立即拼团-' : '好货分享-') + this.product.title,
				imageUrl: this.product.img,
				path: '/pages/product/detail?id=' + this.product.id + (this.product.groupShop ? '&gid=' + this.product.groupShop.id : '')
			}
		},
		methods: {
			/**
			 * 从后端请求数据并加载
			 */ 
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('product', 'getProduct', {
					spuId: that.spuId
				}, failres => {
					uni.hideLoading()
					that.$api.msg(failres.errmsg)
				}).then(res => {
					let stock = 0
					// 分组specification & 计算总库存
					const skuList = res.data.skuList
					for (let i = 0; i < skuList.length; i++) {
						// 1. 计算总库存
						stock += skuList[i].stock
						// 2. 分组
						const tempArray = skuList[i].specification.split(',')
						for (let j = 0; j < tempArray.length; j++) {
							const singleArray = tempArray[j].split('_')
							const key = singleArray[0]
							for (let z = 0; z < res.data.specificationList.length; z++) {
								if (res.data.specificationList[z].title === key) {
									if (res.data.specificationList[z].values) {
										if (res.data.specificationList[z].values.indexOf(singleArray[1]) < 0) {
											res.data.specificationList[z].values.push(singleArray[1])
										}
									} else {
										res.data.specificationList[z].values = [singleArray[1]]
									}
								}
							}
						}
					}
					res.data.stock = stock
					// 解析活动
					const activityType = res.data.activityType
					const activity = res.data.activity
					const timestamp = res.timestamp
					if (activityType && activity && activity.gmtStart < timestamp && activity.gmtEnd > timestamp) {
						if (activityType === 1) {
							that.activityType = activityType
							that.activityId = res.data.activityId
							that.activity = activity
							// 团购活动
							res.data.priceTag = '团购价'
							let lowestPrice = skuList[0].price
							for (let i = 0; i < skuList.length; i++) {
								skuList[i].priceTag = '团购价'
								for (let j = 0; j < activity.groupShopSkuDTOList.length; j++) {
									const groupshop = activity.groupShopSkuDTOList[j]
									if (groupshop.skuId === skuList[i].id) {
										skuList[i].price = groupshop.skuGroupShopPrice
										skuList[i].vipPrice = groupshop.skuGroupShopPrice
										if (skuList[i].price < lowestPrice) {
											lowestPrice = skuList[i].price
										}
									}
								}
							}
							res.data.price = lowestPrice
							res.data.vipPrice = lowestPrice
						}
					}
					that.product = JSON.parse(JSON.stringify(res.data))
					uni.hideLoading()
				})
				that.$api.request('coupon', 'getObtainableCoupon').then(res => {
					that.couponList = res.data
				})
			},
			/**
			 * 领取优惠券
			 * @param {Number} index
			 */
			obtainCoupon(index) {
				const that = this
				that.$api.request('coupon', 'obtainCoupon', {
					couponId: that.couponList[index].id
				}).then(res => {
					that.$api.msg('领取成功')
					that.couponList[index].nowCount++
					that.toggleMask()
				})
			},
			/**
			 * 规格弹窗开关
			 */
			toggleSpec() {
				const that = this
				if (that.specClass === 'show') {
					that.specClass = 'hide';
					setTimeout(() => {
						that.specClass = 'none';
						if (that.toggleCallback) {
							that.toggleCallback()
							that.toggleCallback = undefined
						}
					}, 150);
				} else if (that.specClass === 'none') {
					that.specClass = 'show';
					for (let i = 0; i < that.product.specificationList.length; i++) {
						if (i !== that.product.specificationList.length - 1) {
							that.product.specificationList[i].selectedIndex = 0
						} else {
							that.selectSpec(i, 0)
						}
					}
				}
			},
			/**
			 * 选择规格
			 * @param {Object} specIndex 选择规格维度索引，例如：颜色，内存容量
			 * @param {Object} valueIndex 规格的第N个选择
			 */
			selectSpec(specIndex, valueIndex) {
				const that = this
				// 1.设置索引
				that.product.specificationList[specIndex].selectedIndex = valueIndex
				// 2.选中Sku
				// 2.1 构建SkuAttr
				let attr = ''
				for (let i = 0; i < that.product.specificationList.length; i++) {
					const spec = that.product.specificationList[i]
					attr += spec.title + '_' + spec.values[spec.selectedIndex]
					if (i !== that.product.specificationList.length - 1) {
						attr += ','
					}
				}
				// 3.遍历SkuList
				for (let i = 0; i < that.product.skuList.length; i++) {
					if (that.product.skuList[i].specification === attr) {
						that.selectedSku = that.product.skuList[i]
						break
					}
				}
				that.$forceUpdate()
			},
			/**
			 * 加入购物车
			 */
			addCart() {
				const that = this
				if (!that.selectedSku.id) {
					that.specClass = 'none'
					that.toggleSpec()
					that.toggleCallback = that.addCart
				} else {
					//添加到购车车
					that.$api.request('cart', 'addCartItem', {
						skuId: that.selectedSku.id,
						num: that.buyNum ? that.buyNum : 1
					}).then(res => {
						if (that.product.groupShop) {
							that.$api.msg('从购物车结算不会参加团购')
						} else {
							that.$api.msg('添加购物车成功')
						}

					})
				}
			},
			/**
			 * 收藏 OR 取消收藏
			 */
			likeIt() {
				const that = this
				if (that.product.favorite) {
					that.product.favorite = false
					this.$api.request('favorite', 'delete', {
						spuId: that.product.id
					}).then(res => {

					})
				} else {
					that.product.favorite = true
					this.$api.request('favorite', 'create', {
						spuId: that.product.id
					})
				}
			},
			/**
			 * 购买，单品提交订单
			 */
			buy() {
				const that = this
				if (!that.selectedSku.id) {
					that.specClass = 'none'
					that.toggleSpec()
					that.toggleCallback = that.buy
				} else {
					let skuItem = {
						skuId: that.selectedSku.id,
						num: that.buyNum,
						title: that.product.title,
						freightTemplateId: that.product.freightTemplateId,
						originalPrice: that.selectedSku.originalPrice,
						price: that.selectedSku.price,
						vipPrice: that.selectedSku.vipPrice,
						skuTitle: that.selectedSku.title,
						spuImg: that.product.img,
						skuImg: that.selectedSku.img,
						stock: that.selectedSku.stock,
						spuId: that.product.id,
						categoryId: that.product.categoryId,
						categoryIdList: that.product.categoryIds,
						weight: that.selectedSku.weight
					}
					if (that.product.groupShop) {
						skuItem['groupShopId'] = that.product.groupShop.id
					}
					let skuList = [1]
					skuList[0] = skuItem
					that.$api.globalData.skuList = skuList
					uni.navigateTo({
						url: `/pages/order/create?takeway=buy`
					})
				}
			},
			/**
			 * 前往评论页面 
			 */
			navAppraisePage() {
				uni.navigateTo({
					url: `/pages/product/appraise?spuid=${this.product.id}`
				})
			},
			/******* 以下非业务方法 *******/
			stopPrevent() {},
			numberChange(e) {
				this.buyNum = e.number
			},
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			closeSpec() {
				this.toggleCallback = undefined
				this.toggleSpec()
			}
		},

	}
</script>


<style lang='scss'>
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
			width: 450rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 750upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
					
					.coupon-tip {
						align-items: center;
						margin-left: 8upx;
						padding: 4upx 10upx;
						background: $uni-color-primary;
						font-size: $font-sm;
						color: #fff;
						border-radius: 6upx;
						line-height: 1;
						transform: translateY(-4upx);
					}
				}

				.selected-text {
					margin-right: 10upx;
				}
				
				
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 30upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $base-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}

	.rich-img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 0px;
	}


	button::after {
		border: none;
	}
</style>
